import React, { Component } from 'react';
import '../styles/Myfenlei.scss'
import * as service from '../api/index'

class Myfenlei extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex:0,
            list:[],
            list1:[]
        }
    }
    handleClick( index ){
        this.setState({currentIndex:index},async ()=>{
            var res=await service.category_subcate({id:this.state.list[index].id})
            this.setState({list1:res.data.subcate})
        });
    }
    async componentDidMount(){
        let res=await service.category_list()
        let res1=await service.category_subcate({id:res.data.list[0].id})
            this.setState({list:res.data.list,list1:res1.data.subcate})
            
    }
    render() {
        return (
            <div className='fenlei'>
                <div className="left">
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                <div className={ 'lei1 ' + (this.state.currentIndex == index ? 'active1' : '') } key={index}>
                                    <div onClick={()=>{ this.handleClick( index ) }} className={ 'name ' + (this.state.currentIndex == index ? 'active' : '') } >{item.name}</div>
                                </div>
                            )
                        })
                    }
                </div>

                <div className="right">
                    {
                        
                        this.state.list1.billboards&& this.state.list1.billboards.map((item1,index1)=>{
                            return (
                                <div className="list1" key={index1}>
                                    <img src={item1.pic} alt="" />
                                    <div className="list2">
                                    {
                                    this.state.list1.subcategory&&this.state.list1.subcategory.map((item2,index2)=>{
                                        return (
                                            <div className="item2" key={index2}>
                                                <div className="name2">{item2.name}</div>
                                                <div className="list3">
                                    {
                                    item2.subNavs&&item2.subNavs.map((item3,index3)=>{
                                        return (
                                            <div className="item3" key={index3}>
                                                <img src={item3.pic} alt="" />
                                                <div className="name">{item3.name}</div>
                                            </div>
                                        )
                                    })
                                    }
                                    </div>
                                            </div>
                                        )
                                    })
                                    }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Myfenlei;